<template>
    <el-text type="primary" size="large">
        <h1 class="my-h1">类型管理</h1>
    </el-text>

    <!-- 主体表格 -->
    <el-table :data="typeData" style="width: 100%">
        <el-table-column fixed prop="tid" label="类型ID" width="180" />
        <el-table-column prop="name" label="类型名称" width="300" />
        <el-table-column prop="createTime" label="创建时间" width="270" />
        <el-table-column prop="updateTime" label="最后一次更新时间" width="270" />
        <el-table-column fixed="right" label="操作" width="200">
            <template #default="scope">
                <el-button plain type="primary" size="small" @click="updateType(scope.row)">修改</el-button>
                <el-button plain type="danger" size="small" @click="deleteType(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 底部行 -->
    <el-row style="margin-top: 20px;justify-content: space-between;">
        <el-button type="primary" style="width: 100px;height: 40px;" @click="isInsert = true">添加类型</el-button>
    </el-row>





    <el-dialog v-model="isUpdate" title="修改类型" width="40%" style="border-radius: 10px;">
        <el-form label-position="left" label-width="150px" :model="userUpdateFrom" style="max-width: 460px;margin: 0 auto;">
            <div style="font-size: 12px;color: gray;margin-bottom:30px;text-align: center;">*部分数据不予手动修改，将不进行展示*</div>
            <el-form-item label="类型ID（唯一键）">
                <el-input v-model="typeUpdateFrom.tid" disabled />
            </el-form-item>
            <el-form-item label="类型名称" prop="name">
                <el-input v-model="typeUpdateFrom.name" />
            </el-form-item>

        </el-form>
        <template #footer>
            <el-button @click="isUpdate = false">关闭</el-button>
            <el-button type="primary" @click="submit_updateType">提交</el-button>
        </template>
    </el-dialog>

    <el-dialog v-model="isInsert" title="添加类型" width="40%" style="border-radius: 10px;">
        <el-form label-position="left" label-width="150px" :model="typeInsertFrom" style="max-width: 460px;margin: 0 auto;" >
            <div style="font-size: 12px;color: gray;margin-bottom:30px;text-align: center;">*部分数据无需手动添加，将不进行展示*</div>
            <el-form-item label="类型ID（唯一键）">
                <el-input v-model="typeInsertFrom.tid" disabled />
            </el-form-item>
            <el-form-item label="类型名称" prop="name" :rules="[
                    { required: true, message: '请输入类型名称', trigger: 'blur' },
                    { min: 4, max: 10, message: '类型名称长度在 6 到 15 个字符之间', trigger: 'blur' }
                ]">
                <el-input v-model="typeInsertFrom.name" />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="isInsert = false">关闭</el-button>
            <el-button type="primary" @click="submit_insertType">提交</el-button>
        </template>
    </el-dialog>
</template>

<script>
import axios from 'axios'
import { ElMessage } from 'element-plus'

axios.defaults.baseURL = '/api'

export default {
    data() {
        return {
            typeData: [],
            isUpdate: false,
            typeUpdateFrom: {},
            isInsert: false,
            typeInsertFrom: {
                tid: '添加后自动生成',
                name: '',
            },
        }
    },
    created() {
        this.getTypeData()
    },
    methods: {
        getTypeData() {
            axios.get('/type')
                .then(result => {
                    if (result.data.code === 1) {
                        this.typeData = result.data.data;
                    }
                })
                .catch(err => {
                    console.log(err);
                })
        },
        deleteType(type) {
            let arr = [];
            arr.push(type.tid);
            axios.delete('/type/' + arr)
                .then(result => {
                    if (result.data.code === 1) {
                        ElMessage.success("删除成功");
                        this.getTypeData();
                    } else {
                        ElMessage.error("删除失败");
                        console.log(result.data);
                    }
                })
                .catch(err => {
                    console.log(err);
                    if (err.response.status === 500) {
                        ElMessage.info("后端服务器出现异常");
                        return;
                    }
                    ElMessage.error("删除失败！！！");
                })
        },
        updateType(type) {
            this.typeUpdateFrom = JSON.parse(JSON.stringify(type));
            this.isUpdate = true;
        },
        submit_insertType() {
            const data = {
                name: this.typeInsertFrom.name,
            }
            axios.post('/type', data)
                .then(result => {
                    if (result.data.code === 1) {
                        ElMessage.success("添加成功");
                        this.getTypeData();
                        this.isInsert = false;
                    } else {
                        if (result.data.msg === "name_exist") {
                            ElMessage.info("类型名称 " + this.typeInsertFrom.name + " 已被占用");
                            return;
                        }
                        ElMessage.info("添加失败");
                        console.log(result.data);
                    }
                })
                .catch(err => {
                    console.log(err);
                    if (err.response.status === 500) {
                        ElMessage.info("后端服务器出现异常");
                    }
                })
        },
        submit_updateType() {
            const data = {
                tid: this.typeUpdateFrom.tid,
                name: this.typeUpdateFrom.name,
            }
            axios.put('/type', data)
                .then(result => {
                    if (result.data.code === 1) {
                        ElMessage.success("修改成功");
                        this.getTypeData();
                        this.isUpdate = false;
                    } else {
                        if (result.data.msg === "name_exist") {
                            ElMessage.info("用户名 " + this.typeUpdateFrom.name + " 已被占用");
                            return;
                        }
                        ElMessage.info("修改失败");
                        console.log(result.data);
                    }
                })
                .catch(err => {
                    console.log(err);
                    if (err.response !== null && err.response.status === 500) {
                        ElMessage.info("后端服务器出现异常");
                    }
                })
        },
    }
}
</script>

<style scoped>
.my-h1 {
    color: #000;
    text-align: center;
    font-size: 28px;
    margin: 10px 0;
}
</style>